<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			#main{
				width:100%;
				height:690px;
				/*border: 1px solid red;*/
				box-sizing: border-box;
				
				/*display: flex;*/
				/*flex-basis: 100%;*/
			}
			#head{
				width: 100%;
				height: 48px;
				background:deepskyblue;
				display: flex;
				flex-basis: 100%;
				box-sizing: border-box;
				justify-content: center;
				align-items: center;
				
				
			}
			#head li{flex: 1;}
			#head li{
				line-height: 48px;
				color: white;
				text-align: center;
				/*font-size: 24px;*/
				box-sizing: border-box;
				
			}
			#banner{
				width: 100%;
				height: 200px;
				font-size: 30px;
				border-top: 4px solid white;
				box-sizing: border-box;
				justify-content: center;
				align-items: center;
				display: flex;
				background: greenyellow;
			}
			#list{
				width: 100%;
				height: 100px;
				/*padding: 5px;*/
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				flex-basis: 100%;
				
			}
			#list li{flex:1;}
			#list li{
				height: 100px;
				padding: 5px;
				text-align: center;
				line-height:100px;
				color: white;
				background: black;
				box-sizing: border-box;
				border: 2px solid white;
				border-top: 4px solid white;
				border-bottom: 4px solid white;
				
			}
			#lists{
				width: 100%;
				height: 100px;
				/*padding: 5px;*/
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				flex-basis: 100%;
				
			}
			#lists li{flex:1;}
			#lists li{
				height: 100px;
				padding: 5px;
				text-align: center;
				line-height:100px;
				color: white;
				background: black;
				box-sizing: border-box;
				border: 2px solid white;
				border-top: 0px solid white;
				border-bottom: 2px solid white;
				
			}
			#title{
				width: 100%;
				height: 36px;
				/*padding: 5px;*/
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				flex-basis: 100%;
				
			}
			#title li{flex:1;}
			
			#title li{
				height: 30px;
				text-align: center;
				line-height:30px;
				color: #333333;
				background: greenyellow;
				box-sizing: border-box;
			}
			#lis{
				width: 100%;
				height: 150px;
				/*padding: 5px;*/
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				flex-basis: 100%;
				
			}
			#lis li{flex:1;}
			#lis li{
				height: 150px;
				/*padding: 5px;*/
				text-align: center;
				line-height:150px;
				color: white;
				background: black;
				box-sizing: border-box;
				border: 2px solid white;
				border-top: 0px solid white;
				border-bottom: 2px solid white;
				
			}
			#lis li:nth-child(1){
				flex-grow: 1;
			}
			#lis li:nth-child(2){
				flex-grow: 2;
			}
			#lis li:nth-child(3){
				flex-grow: 1;
			}
			#foot{
				width: 100%;
				height: 48px;
				background:deepskyblue;
				display: flex;
				box-sizing: border-box;
				justify-content: center;
				align-items: center;
				flex-basis: 100%;
				
			}
			#foot li{flex: 1;}
			#foot li{
				height: 36px;
				line-height: 36px;
				color: white;
				text-align: center;
				/*font-size: 24px;*/
				box-sizing: border-box;
				
			}
		</style>
	</head>
	<body>
		<div id="main">
			<header>
				<nav>
					<ul id="head">
						<li>首页</li>
						<li>课程</li>
						<li>项目</li>
						<li>PHP</li>
						<li>联系我们</li>
					</ul>
				</nav>
			</header>
			<article>
				<section>
					<ul id="banner">
						banner
					</ul>
				</section>
				<section>
					<ul id="list">
						<li>banner</li>
						<li>banner</li>
						<li>banner</li>
						
					</ul>
				</section>
				<section>
					<ul id="lists">
						<li>banner</li>
						<li>banner</li>
						<li>banner</li>
					</ul>
				</section>
				<section>
					<ul id="title">
						<li>title</li> 
					</ul>
				</section>
				<section>
					<ul id="lis">
						<li>banner</li>
						<li>banner</li>
						<li>banner</li>
						
					</ul>
				</section>
				
			</article>
			<footer>
				<ul id="foot">
					<li>后盾</li>
					<li>后盾</li>
					<li>后盾</li>
					<li>后盾</li>
				</ul>
			</footer>
		</div>
	</body>
</html>
